<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="utf-8">
<title>分享标题：全民过圣诞，1秒钟给头像带个圣诞帽</title>
<script type="text/javascript">
/*
if(document.cookie.indexOf("c_u_id") == -1){
	var redirect_url = encodeURIComponent("http://"+location.host+"/create?action=rd");
	location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx19b09869369d0e24&redirect_uri="+redirect_url+"&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect";
}
*/
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
body{margin: 0;padding: 0;background-color: #eee;color: #666;background-image: url("images/bg.jpg");background-size:cover;}
.editor{width: 300px;margin: 50px auto;position: relative;}
.bar{
	width: 200px;
	height: 20px;
	border: 1px solid #CC3611;
	position: relative;
	margin: 0 auto;
	margin-bottom:20px;
	margin-top: 20px;
	font-size: 12px;
	line-height: 20px;
	padding-left: 5px;
	box-shadow: 1px 1px 2px #CC3611;
	border-radius:15px;
	line-height: 20px;
}
.move-bar{
	position: absolute;
	width: 10px;
	height: 20px;
	background-color: #CC3611;
	left: 90px;
	top: 0px;
	border: 1px solid #CC3611;
	border-top: 0px;
	border-bottom: 0px;
}
#can{
	
}
.e-panel{
	width: 132px;
	height: 132px;
	margin: 0 auto;
	border: 2px solid #CC3611;
	box-shadow: 1px 1px 2px #CC3611;
}
.ft{
	width:100%;
	position: absolute;
	bottom: 5px;
	text-align: center;
	font-size: 14px;

}
</style>
</head>
<body>
<div class="editor">
<div class="e-panel">
<img id="img" >
<canvas width="132" height="132" id="can" style="display: none;"></canvas>
</div>
<div class="bar" >
	 size:
	<div class="move-bar" id="h-size"></div>
</div>
<div class="bar">
	 x:
	<div class="move-bar" id="h-position-x"></div>
</div>
<div class="bar">
	y:
	<div class="move-bar" id="h-position-y"></div>
</div>
<div style="font-size: 14px;color: #666;text-align: center;	margin-bottom: 10px;">
	长按图片即可保存
</div>
</div>
<div class="ft">唯玩&Wemedia联合出品</div>
<script type="text/javascript">
var can = document.getElementById("can");
var cxt = can.getContext("2d");
var draw = function(x,y,w,h){
	cxt.clearRect(0,0,132,132);
	var img= new Image();
	img.src = "images/1.jpg";
	img.onload = function(){
		cxt.drawImage(img,0,0,132,132);
		cxt.save();
	}
	var img1= new Image();
	img1.src = "images/h.png";
	img1.onload = function(){
		cxt.drawImage(img1,x,y,w,h);
		$("#img").attr("src",can.toDataURL("png"));
	}
};
draw(0,0,50,50);
var dx = 0,dy =0; dw = 50, dh = 50;
var hsize = document.getElementById("h-size");
$(function(){
	var x = 0,ex = 0;
	var is_start = false;
	$("#h-size,#h-position-x,#h-position-y").on("touchstart",function(e){
		x = 0;
		x = e.originalEvent.changedTouches[0].pageX;
		is_start = true;
		ex = parseInt($(this).css("left"));
	});
	$("#h-size").on("touchmove",function(e){
		if(is_start){
			var sx = e.originalEvent.changedTouches[0].pageX;
			var left = sx-x+ex;
			if(left <= 122 && left >= 1){
				$(this).css("left",left+"px");
				dw = left;
				dh = left;
				draw(dx,dy,dw,dh);
			}
		}
	});
	$("#h-position-x").on("touchmove",function(e){
		if(is_start){
			var sx = e.originalEvent.changedTouches[0].pageX;
			var left = sx-x+ex;
			if(left <= 190 && left >= 1){
				$(this).css("left",left+"px");
				left = left - 90;
				dx = left;
				draw(dx,dy,dw,dh);
			}
		}
	});
	$("#h-position-y").on("touchmove",function(e){
		if(is_start){
			var sx = e.originalEvent.changedTouches[0].pageX;
			var left = sx-x+ex;
			if(left <= 190 && left >= 1){
				$(this).css("left",left+"px");
				left = left - 90;
				dy = left;
				draw(dx,dy,dw,dh);
			}
		}
	});
	$("#h-size,#h-position-x,#h-position-y").on("touchend",function(e){
		is_start = false;
		x = 0;
	});
	
	$(".e-panel").click(function(){
	});
});
</script>
</body>
</html>